<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-button type="primary" @click="addGoods()"><i class="el-icon-plus"></i>添加商品</el-button>
    </div>
    <el-dialog title="选择商品" size="large" :visible.sync="goodsDialog" custom-class="goodsDialog">
      <el-form>
        <el-row style="margin-top:20px">
          <el-col :span="9">
            <el-form-item label="分类">
              <el-select v-model="chooseGoodsInfo.firstCate" @change="searchGoods($event, '2', 'dialog')" style="width:110px" placeholder="一级分类">
                <el-option v-for="(item, index) in searchFirstGroup" :label="item.cateName" :value="item.id" :key="index"></el-option>
              </el-select>
              <el-select v-model="chooseGoodsInfo.secondCate" @change="searchGoods($event, '3', 'dialog')" style="width:110px" placeholder="二级分类">
                <el-option v-for="(item, index) in searchSecondGroup" :label="item.cateName" :value="item.id" :key="index"></el-option>
              </el-select>
              <el-select v-model="chooseGoodsInfo.thirdCate" style="width:110px" placeholder="三级分类">
                <el-option v-for="(item, index) in searchThreeGroup" :label="item.cateName" :value="item.id" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="品牌">
              <el-select v-model="chooseGoodsInfo.fourCate" style="width:120px" placeholder="品牌">
                <el-option v-for="(item, index) in brandGroup" :label="item.brandName" :value="item.brandId" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="商品ID">
              <el-input v-model="chooseGoodsInfo.hmpId" style="width:120px" placeholder="品牌"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="商品名称">
              <el-input v-model="chooseGoodsInfo.hmpName" style="width:120px" placeholder="品牌"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="searchCouponGoods('商品')">搜索</el-button>
          </el-col>
        </el-row>
        <el-table ref="table" :data="goodsTableList" border @selection-change="selectChange($event, 'dislog')" v-loading="searchLoading">
          <el-table-column type="selection" align="center" label="全选"></el-table-column>
          <el-table-column prop="HMP_Id" align="center" label="商品ID"></el-table-column>
          <el-table-column prop="threeName" align="center" label="商品名称"></el-table-column>
          <el-table-column label="分类信息" align="center" min-width="300">
            <template scope="scope">
              <span>{{scope.row.firstName}} —— {{scope.row.secondName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="HMB_BrandName" align="center" label="品牌"></el-table-column>
          <el-table-column align="center" label="操作">
            <template scope="scope">
              <el-button  @click="addManyCoods(scope.row.HMP_Id)" type="text">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="12">
            <el-button type="primary" @click="addManyCoods(diaSelectGroup)" style="margin-top:20px">批量添加</el-button>
          </el-col>
          <el-col :span="12">
            <el-pagination
              @current-change="handleCurrentChange($event, 'dialog')"
              :page-size="Number(chooseGoodsInfo.pageSize)"
              layout="total, prev, pager, next"
              :total="Number(chooseGoodsInfo.total)"
              style="padding-top:10px;text-align: right;">
            </el-pagination>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <el-form :inline="true" class="demo-form-inline" label-width="70px" style="margin-top:20px">
      <el-form-item label="分公司">
        <el-select v-model="formInline.branchId" placeholder="请选择分公司"
        :disabled="isBranch" style="width:150px;margin-right:10px">
          <el-option v-for="(item, index) in branchList" :key="index"
          :label="item.branch_Name"
          :value="item.branch_Id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="平台">
        <el-select v-model="formInline.platformType" placeholder="请选择平台"
        style="width:150px;margin-right:10px">
          <el-option label="连锁" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.bpStatus" placeholder="请选择状态"
        style="width:150px;margin-right:10px">
          <el-option label="上线" value="0"></el-option>
          <el-option label="下线" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="一级分类">
        <el-select v-model="formInline.firstCate" @change="searchGoods($event, '2', 'list')"
        style="width:150px;margin-right:10px" clearable  placeholder="一级分类">
          <el-option v-for="(item, index) in firstClassifyGroup" :label="item.cateName" :value="item.id" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select v-model="formInline.secondCate"
        style="width:150px;margin-right:10px" clearable  placeholder="二级分类">
          <el-option v-for="(item, index) in secondClassifyGroup" :label="item.cateName" :value="item.id" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="formInline.hmpName" style="width:150px;margin-right:10px"
        placeholder="商品名称"></el-input>
      </el-form-item>
      <el-form-item label="商品ID">
        <el-input v-model="formInline.hmpId" style="width:150px;margin-right:40px"
        placeholder="商品ID"></el-input>
      </el-form-item>
			<el-form-item>
        <el-button type="primary"  @click="searchList">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table ref="table" :data="tableData" v-loading="isLoading" border
    @selection-change="selectChange($event, 'list')">
      <el-table-column type="selection" align="center" width="55">
      </el-table-column>
      <el-table-column label="平台" align="center" width="100">
        <template scope="scope">
          <span v-if="scope.row.platform_type === 1">连锁</span>
        </template>
      </el-table-column>
      <el-table-column prop="HMP_Name" label="商品名称" align="center" min-width="300"></el-table-column>
      <el-table-column prop="HMP_Id" label="商品ID" align="center" width="200"></el-table-column>
      <el-table-column label="分类信息" align="center" min-width="300">
        <template scope="scope">
          <span>{{scope.row.firstName}} —— {{scope.row.secondName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100" align="center">
        <template scope="scope">
          <span v-if="scope.row.bp_status === 0">已上线</span>
          <span v-if="scope.row.bp_status === 1">已下线</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template scope="scope">
          <el-button v-if="scope.row.bp_status === 0" type="info" size="small" @click="onOffline(scope.row.HMP_Id, '1')">下线</el-button>
          <el-button v-if="scope.row.bp_status === 1" type="success" size="small" @click="onOffline(scope.row.HMP_Id, '0')">上线</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row style="margin-top:10px;">
      <el-col :span="12">
        <el-button v-if="showButton" :disabled="disabledBut" @click="onOffline(selectGroup, '0')" type="primary">批量上线</el-button>
        <el-button v-if="showButton" :disabled="disabledBut" @click="onOffline(selectGroup, '1')" type="primary">批量下线</el-button>
      </el-col>
      <el-col :span="12" style="float:right">
        <el-pagination
          @current-change="handleCurrentChange($event, 'list')"
          :page-size="Number(formInline.pageSize)"
          layout="total, prev, pager, next"
          :total="Number(total)"
          style="float: right;">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import mixins from '../../../components/mixins.vue'
  import { mapState } from 'vuex'
  import { cms, batchManage } from '../../../config/proxy.js'
  export default {
    mixins: [mixins],
    data () {
      return {
        chooseGoodsInfo: { // 选择商品条件
          firstCate: '',
          secondCate: '',
          thirdCate: '',
          fourCate: '',
          hmpId: '',
          hmpName: '',
          page: '1',
          pageSize: '10',
          total: 0
        },
        addDisableBut: true,
        brandGroup: [], // 品牌
        searchLoading: false,
        goodsTableList: [],
        diaSelectGroup: [], // 弹框选中的table
        goodsDialog: false, // 弹框
        formInline: {
          branchId: '',
          bpStatus: '', // 状态
          platformType: '', // 平台  1 代表 连锁
          firstCate: '',
          secondCate: '',
          hmpId: '',
          hmpName: '',
          page: 1,
          pageSize: 10
        },
        total: '',
        isLoading: false,
        showButton: false,
        isBranch: false,
        tableData: [], // table 数组
        disabledBut: true, // 批量上下线 按钮 禁用状态
        selectAble: [], // 选择框禁用值
        branchList: [], // 分公司 数组
        selectGroup: [], // 选中的集合
        // selectOnGroup: [], // 选中的上线集合
        // selectOffGroup: [], // 选中的下线集合
        firstClassifyGroup: [], // 一级分类数组
        secondClassifyGroup: [], // 二级分类数组
        searchFirstGroup: [], // 一级分类数组
        searchSecondGroup: [], // 二级分类数组
        searchThreeGroup: [] // 三级分类数组
      }
    },
    methods: {
      searchGoods (id, group, text) { // 查询商品分类方法
        cms.pType({pid: id}, (res) => {
          // console.log(res)
          if (res.message === 'ok') {
            // console.log(res.content)
            if (group === '1') {
              if (text === 'dialog') {
                this.searchFirstGroup = res.content
              } else {
                this.firstClassifyGroup = res.content
              }
            } else if (group === '2') {
              if (text === 'dialog') {
                this.searchSecondGroup = res.content
              } else {
                this.secondClassifyGroup = res.content
              }
            } else if (group === '3' && text === 'dialog') {
              this.searchBrand(id)
              this.searchThreeGroup = res.content
            }
          }
        })
      },
      searchBrand (id) { // 查询品牌
        console.log(id)
        cms.brand({cateId: id}, (res) => {
          if (res.message === 'ok') {
            console.log(res)
            this.brandGroup = res.content
          }
        })
      },
      searchCouponGoods () { // 查询优惠券/商品
        // console.log('查询优惠券')
        this.searchLoading = true
        var _data = this.chooseGoodsInfo
        _data.branchId = this.branchId
        console.log(_data)
        batchManage.sxx.proList(_data, (res) => {
          if (res.message === 'ok') {
            console.log(res)
            this.searchLoading = false
            this.goodsTableList = res.content.content
            this.chooseGoodsInfo.total = res.content.count
            this.chooseGoodsInfo.page = res.content.page
            // this.matchOperation(text, this.goodsTableList, this.goodsDetails)
          }
        })
      },
      addManyCoods (id) { // 添加商品
        var _data = {
          branchId: this.formInline.branchId,
          platformType: this.formInline.platformType,
          hmpIds: id instanceof Array ? id : [id]
        }
        console.log(_data)
        batchManage.sxx.addMany(_data, (res) => {
          console.log(res)
          if (res.message === 'ok') {
            if (res.content.success === true) {
              this.message('添加成功')
              this.searchList()
            } else {
              this.message(res.content.retMsg2)
            }
          } else {
            this.message('查询失败')
          }
        })
      },
      searchList () { // 查询列表
        var _data = this.formInline
        console.log(_data)
        this.isLoading = true
        batchManage.sxx.list(_data, (res) => {
          if (res.message === 'ok') {
            console.log(res)
            this.tableData = res.content.content
            this.isLoading = false
            this.showButton = true
            this.total = res.content.count
            this.formInline.page = res.content.page
            // if (this.formInline.branchId !== '' && this.formInline.platformType !== '') {
            //   this.addDisableBut = false
            // }
          }
        })
      },
      handleCurrentChange (val, text) { // 分页
        if (text === 'list') {
          this.formInline.page = val
          // this.tableData = []
          this.isLoading = true
          this.searchList()
        } else {
          this.chooseGoodsInfo.page = val
          // this.goodsTableList = []
          this.searchLoading = true
          this.searchCouponGoods()
        }
      },
      addGoods () {
        if (this.formInline.branchId !== '' && this.formInline.platformType !== '' && this.tableData.length !== 0) {
          this.goodsDialog = true
          this.searchGoods('', '1', 'dialog') // 查询一级分类
          console.log('选择商品')
        } else {
          this.message('打开失败！请选择分公司和平台，并进行查询。')
        }
      },
      selectChange (selection, text) { // 列表多选框
        if (text === 'dialog') {
          if (selection.length === 0) {
            this.selectAble = []
            this.disabledBut = true
          } else {
            this.disabledBut = false
            this.selectGroup = []
            for (let index = 0; index < selection.length; index++) {
              const element = selection[index]
              this.selectGroup.push(element.HMP_Id)
            }
          }
        } else {
          if (selection.length === 0) {
            this.diaSelectGroup = []
            this.disabledBut = true
          } else {
            this.disabledBut = false
            this.diaSelectGroup = []
            for (let index = 0; index < selection.length; index++) {
              const element = selection[index]
              this.diaSelectGroup.push(element.HMP_Id)
            }
          }
        }
      },
      onOffline (id, status) { // 商品上下线
        console.log()
        var _data = {
          bpStatus: status,
          hmpIds: id instanceof Array ? id : [id]
        }
        console.log(_data)
        batchManage.sxx.updateMany(_data, (res) => {
          console.log(res)
          this.searchList()
        })
      },
      message (text) {
        var type = ''
        if (text.indexOf('成功') > 0 || text.indexOf('正确') > 0) {
          type = 'success'
        } else if (text.indexOf('失败') > 0 || text.indexOf('错误') > 0 || text.indexOf('不为空') > 0 || text.indexOf('重复') > 0) {
          type = 'error'
        }
        this.$message({
          showClose: true,
          message: text,
          type: type
        })
      }
    },
    created () {
      this.searchGoods('', '1', 'list') // 查询一级分类
      if (this.branchName === '总公司') {
        this.isBranch = false
        this.formInline.branchId = this.branchId
      } else {
        this.formInline.branchId = this.branchId
        this.isBranch = true
      }
    },
    computed: mapState({
      userName: function (state) {
        if (!state.user.info.user_name) {
          this.$store.dispatch('SET_TOKEN')
        }
        return state.user.info.user_name
      },
      branchName: function (state) {
        return state.user.info.branchId === 1 ? '总公司' : state.user.info.branchName
      },
      branchId: function (state) {
        return state.user.info.branchId
      },
      branchOrgId: function (state) {
        return state.user.info.branchOrgId
      },
      deptName: function (state) {
        return state.user.info.parOrgName
      },
      deptId: function (state) {
        return state.user.info.or_org_id
      }
    })
  }
</script>

